<template>
  <div class="pay-page">
    <el-card class="card">
      <el-form ref="form" label-width="120px" class="flex-form align-left">
        <div class="form-row">
          <el-form-item label="运输任务编号:" class="flex-item">
            <el-input v-model="queryParams.mission" size="medium" clearable placeholder="请输入运输任务编号" />
          </el-form-item>

          <!-- 下拉 树形图 关键select需要option 关键思路隐藏 option 直接显示自适应树状结构   -->
          <el-form-item label="起始地机构:" class="flex-item">
            <el-select ref="selectTree" v-model="selectValue" class="main-select-el-tree" placeholder="请选择起始地机构" size="medium">
              <el-option v-for="item in carList" :key="item.id" :label="item.name" :value="value" style="display: none;" />
              <el-tree
                ref="selecteltree"
                :data="carList"
                class="main-select-el-tree"
                node-key="id"
                highlight-current
                :props="{label:'name',children:'children'}"
                :expand-on-click-node="false"
                @node-click="hasValue"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="目的的机构:" class="flex-item">
            <el-select ref="destinationSelect" v-model="destination" class="main-select-el-tree" laceholder="请选择目的的机构" size="medium">
              <el-option v-for="item in carList" :key="item.id" :label="item.name" :value="value1" style="display: none;" />
              <el-tree
                ref="destinationTree"
                :data="carList"
                class="main-select-el-tree"
                node-key="id"
                highlight-current
                :props="{label:'name',children:'children'}"
                :expand-on-click-node="false"
                @node-click="hasValue1"
              />
            </el-select>
          </el-form-item>
        </div>

        <div class="form-row">
          <div class="form-row-inner">
            <el-form-item label="回车时间:">
              <el-date-picker
                v-model="queryParams.listDate"
                size="medium"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                style="width: 250px;"
              />
            </el-form-item>

            <el-form-item label="车辆是否可用:" class="flex-item">
              <el-select v-model="queryParams.vehicle" placeholder="请选择" size="medium">
                <el-option
                  v-for="item in paymentMethodList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="medium" class="stbList" @click="search">搜索</el-button>
              <el-button type="primary" size="medium" class="addList" @click="reset">重置</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </el-card>

    <el-card class="card-list">

      <!-- 表格 -->
      <div class="table">
        <el-table :header-cell-style="{background:'#f8faff'}">
          <el-table-column
            label="运输任务编号"
          />
          <el-table-column
            label="起始地机构"
          />
          <el-table-column
            label="目的地机构"
          />
          <el-table-column
            label="运单数量"
          />
          <el-table-column
            label="出车时间"
          />
          <el-table-column
            label="回车时间"
          />
          <el-table-column
            label="车牌号码"
          />
          <el-table-column
            label="车辆是否可用"
          />
          <el-table-column
            label="操作"
            width="80"
          />
          <template #empty>
            <div>
              <img class="imgSrc" :src="imgUrl" alt="">
              <span class="imgText">{{ isSearch?'这里很干净':'没有找到您要的内容哦~' }}</span>
            </div>
          </template>
        </el-table>
      </div>

    </el-card>
    <div class="footer">
      <span>江苏传智播客教育科技股份有限公司</span>
      <span> 版权所有Copyright 2006-2022 All Rights Reserved</span>
      <span> 苏ICP备16007882号-11</span>
    </div>
  </div>
</template>

<script>
import { getJigou } from '@/api/jigou'
// import { detailsPayList, paginGeryList } from '@/api/pay'
export default {
  data() {
    return {
      value: 11,
      value1: 11,
      queryParams: {
        vehicle: '',
        mission: '',
        listDate: []
      },
      destination: '',
      selectValue: '',
      carList: [],
      imgUrl: 'https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png',
      isSearch: true,
      paymentMethodList: [
        { label: '全部', value: '1' },
        { label: '可用', value: '2' },
        { label: '不可用', value: '3' }
      ]
    }
  },
  async created() {
    const { data } = await getJigou()
    this.carList = JSON.parse(data)
    console.log(this.carList)
  },
  methods: {
    async search() {
      this.isSearch = false
      this.imgUrl = 'https://slwl-admin.itheima.net/static/img/icon-empty.3abd3b9a.png'
    },
    // 清除表单
    reset() {
      this.isSearch = true
      this.imgUrl = 'https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png'
      this.queryParams.vehicle = ''
      this.queryParams.mission = ''
      this.queryParams.listDate = ''
      this.selectValue = ''
      this.destination = ''
    },
    // 下拉树形图操作
    hasValue(row) {
      // console.log(row.name)
      this.selectValue = row.name
      this.$refs.selectTree.blur()
    },
    hasValue1(row) {
      console.log(row.name)
      this.destination = row.name
      this.$refs.destinationSelect.blur()
    }
  }
}
</script>

<style lang="scss" scoped>
.pay-page {
  .card {
    height: 200px;
    margin: 20px 20px;
    padding: 20px 20px;
.flex-form {
  display: flex;
  flex-wrap: wrap;
}

.table{
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #eef0f6;
}
.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.form-row-inner {
  display: flex;
  flex: 1;
}

.align-left {
  justify-content: flex-start;
}
.form-row .el-input,
.form-row .el-select {
  width: 250px;
}

.align-right {
  justify-content: flex-end;
}
    // 输入框
    ::v-deep .search {
      width: 220px;
      margin-right: 20px;
    }

    // 表格
    .table {
      margin-top: 20px;
    }

    // 分页器
    .pagination {
      margin-top: 20px;
    }
  }
  .card-list{
   margin: 20px 20px;
    padding: 0px 20px;
  }
  .stbList{
    background-color: rgb(227, 66, 66);
    border-color: rgba(0, 0, 0, 0);

  }
  .addList{
    color: black;
    background-color:white;
    border-color:black
  }
  .imgSrc{
  margin-top: 20px;
    width: 25%;
    height: 25%;
}
.imgText{
  display: block;
  margin-bottom: 25px;
}
  .footer{
    margin-top: 50px;
    text-align: center;
    color: rgb(136, 134, 134);
    span{
      margin-right: 5px;
    }
  }
   }
</style>
